<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;border-bottom: 2rpx solid #F7F7F7;display: flex;">
		<image @click="backTo()"
		 src="/static/shequ/fh.png" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;">优惠券</text>
		</view>
		<block v-for="(item,index) in couponsList" :key="index">
			<view style="display: flex; font-size: 24rpx;box-shadow: 0 0 5rpx 2rpx #f1f1f1;width: 690rpx;height: 170rpx;border-radius: 24rpx;margin: 40rpx auto -10rpx;">
				<view style="color: #FF6F00;margin-left: 26rpx;display: flex;align-items: center;">
					<text>¥</text>
					<text>{{item.price}}</text>
				</view>
				<view style="color: #999;display: flex;flex-direction: column;margin: 33rpx 0 33rpx 30rpx;line-height: 40rpx;">
					<text style="font-size: 32rpx;color: #1B1B1B;">{{item.text}}</text>
					<text>{{item.condition}}</text>
					<text>{{item.date}}</text>
				</view>
				<button type="default" style="width: 140rpx;height: 60rpx;border-radius: 30rpx;font-size: 24rpx;color: #fff;background-color: #FFD333;margin: 55rpx 30rpx 55rpx 180rpx;color: #1B1B1B;"
				:class="{'btn':item.flag }" @click="changeState(index)" :disabled="item.flag"
				>{{item.btnText}}</button>
			</view>
		</block>
		
	</view>
</template>

<script>
	import {Storage} from '@/static/libs/utils.js'
	export default {
		data() {
			return {
				couponsList:[
					{
						price:25,
						text:'社区团购通用券',
						condition:'满75可用',//用卷条件
						date:'2021.04.25到期',
						btnText:'领取',
						flag:false
					},
					{
						price:35,
						text:'社区团购通用券',
						condition:'满65可用',//用卷条件
						date:'2021.04.25到期',
						btnText:'领取',
						flag:false
					},
					{
						price:55,
						text:'社区团购通用券',
						condition:'满105可用',//用卷条件
						date:'2021.04.25到期',
						btnText:'已领取',
						flag:true
					},
				],
				token:''
			};
		},
		onLoad() {
			this.token = Storage.get('token');
		},
		methods:{
			// 获取优惠券列表
			getCouponsList(){
				
			},
			changeState(index){
				// console.log(86,index);
				this.couponsList[index].flag = true;
				this.couponsList[index].btnText='已领取';
			}
		}
	}
</script>

<style lang="scss" >
	.btn{
		background-color: #EEEEEE !important
	}
	
</style>
